<script >
// 注册组件
import { defineComponent } from "vue"
// 导入图标
import { PictureFilled, StarFilled, Star, HomeFilled, UserFilled, Shop, InfoFilled, Checked, ElemeFilled, Basketball, Baseball, ArrowDownBold } from "@element-plus/icons-vue";

import { userlogin } from '@/api/user'
export default defineComponent({
  data() {
    return {
      isShow: true,
      token: window.localStorage.getItem('token'),
      name: '',
      isCollapse: false,
      bread: [
        {
          id: 1,
          tag: '首页',
          path: '/home',
          close: false
        },
        {
          id: 2,
          tag: '美化',
          path: '/beauty',
          close: true
        },
        {
          id: 3,
          tag: '用户',
          path: '/user',
          close: true
        },
        {
          id: 4,
          tag: '角色',
          path: '/permissions/adminlist',
          close: true
        },
        {
          id: 5,
          tag: '权限',
          path: '/permissions/powerlist',
          close: true
        },
        {
          id: 6,
          tag: '商品',
          path: '/goods/list',
          close: true
        },
        {
          id: 7,
          tag: '订单',
          path: '/orders/prolist',
          close: true
        },
      ],

    }
  },
  // icon图标
  components: {
    PictureFilled,
    StarFilled,
    Star,
    HomeFilled,
    UserFilled,
    Shop,
    InfoFilled,
    Checked,
    ElemeFilled,
    Basketball,
    Baseball,
    ArrowDownBold,

  },
  computed: {
    // 点击修改侧边栏图标
    show() {
      return this.isShow ? "Basketball" : "Baseball";

    },
    // 点击修改aside的宽度
    asideWidth() {
      return this.isShow ? "200px" : "50px";
    },
  },
  methods: {
    // 退出登录
    back() {
      this.$router.push('/login')
      window.localStorage.clear()
    },
    // 面包屑的删除
    handleClose(id) {
      this.bread = this.bread.filter(item => {
        return item.id !== id
      })
    }
  },
  mounted() {
    // 判断当前是否有token 没有就跳转登录页
    if (!window.localStorage.getItem('token')) {
      this.$router.push('/login')
    }
    // 请求用户信息 渲染页面
    userlogin({ username: 'admin', password: '123456' }).then(res => {
      this.name = res.data.data.username;
    })
  }

})
</script>

<template>
  <div class="common-layout">
    <el-container class="header">
      <el-header :style="{ background: this.$store.state.color }">
        <div class="header1">
          <img src="https://picx.zhimg.com/v2-e52c4f2d3a5a3436ff384641bd80b4a8_1440w.jpg?source=172ae18b" alt=""
            style="width: 50px ;height: 50px; border-radius: 50%; margin-right: 30px;">
          <h1>ikun后台管理</h1>
          
              <el-icon v-model="isCollapse" :label="!isCollapse" size="30" @click="isShow = !isShow">
                <component :is="show"></component>
              </el-icon>

          <!-- <el-icon size="30" ><StarFilled /></el-icon> -->
        </div>

        <div class="header" ref="header">
          <h3 class="black">
            <img
              src="https://ts2.cn.mm.bing.net/th?id=OIP-C.54izat7J0AC5Z3YADlaslwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
              alt="">
          </h3>

          <el-dropdown>
            <span class="el-dropdown-link">
              {{ name }}
              <el-icon style="color: #666; margin-left: 10px;">
                <ArrowDownBold />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="back">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="main">

        <el-aside @click="addWidth" class="aside" width="200px">

          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="2" :collapse="isCollapse" class="el-menu-vertical-demo" @open="handleOpen"
                @close="handleClose" :router="true
                  ">
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon size="20">
                      <HomeFilled />
                    </el-icon>
                    <span>后台首页</span>
                  </template>
                  <el-menu-item index="/home">首页</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon size="20">
                      <UserFilled />
                    </el-icon>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item index="/user">用户列表</el-menu-item>
                </el-sub-menu>


                <!-- 权限管理 -->
                <el-sub-menu index="/permissions">
                  <template #title>
                    <el-icon>
                      <InfoFilled />
                    </el-icon>
                    <span>权限管理</span>
                  </template>
                  <el-menu-item index="/permissions/adminlist">角色列表</el-menu-item>
                  <el-menu-item index="/permissions/powerlist">权限列表</el-menu-item>
                </el-sub-menu>


                <el-sub-menu index="/goods">

                  <template #title>
                    <el-icon>
                      <Shop />
                    </el-icon>
                    <span>商品管理</span>
                  </template>
                  <el-menu-item index="/goods/list">商品列表</el-menu-item>
                  <el-menu-item index="/goods/params">商品查询</el-menu-item>
                  <el-menu-item index="/goods/categories">商品分类</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>
                    <el-icon>
                      <Checked />
                    </el-icon>
                    <span>订单管理</span>
                  </template>
                  <el-menu-item index="/orders/ProList">订单列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                  <template #title>
                    <el-icon>
                      <ElemeFilled />
                    </el-icon>
                    <span>页面美化</span>
                  </template>
                  <el-menu-item index="/beauty">美化</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main :style="{ background: this.$store.state.bodycolor }">
          <!-- 面包屑 -->
          <el-breadcrumb separator=" ">
            <el-breadcrumb-item v-for="item in bread" :key="item.path" :to="{ path: item.path }">
              <el-tag :closable='item.close' :disable-transitions="false" @close="handleClose(item.id)">{{ item.tag
              }}</el-tag>
            </el-breadcrumb-item>
          </el-breadcrumb>

          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
  height: 100%;
  // background-color: pink;

  .el-header {
    height: 80px;
    // background-color: v-bind(headerColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 1s;
  }

  .el-col {
    width: 100%;
  }

  .el-menu--vertical {
    width: 100%;

    .el-sub-menu {
      width: 200px;
    }
  }

  .el-container {
    // height: 100%;
  }

  .el-col-12 {
    max-width: 100%;
  }

  .el-container main {
    height: 100%;
  }

  .el-aside {
    // height: 100%;
    width: v-bind(asideWidth);

  }

  .header {
    display: flex;
    justify-content: space-around;

    .btn {
      margin-top: 10px;
      margin-left: 10px;
    }

    .el-dropdown-link {
      color: red;
      text-align: center;
      text-indent: 1em;
      outline: 0;
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 800;
    }
  }

  .header1 {
    display: flex;
    align-items: center;

    h1 {
      margin-right: 40px;
    }

  }

  .el-main {
    height: 100%;
    // overflow: auto;
    transition: 1s;
    // background-color: v-bind(bodyColor);
  }
}

.el-breadcrumb {
  margin-bottom: 20px;

  .el-tag {
    height: 40px;
    font-size: 16px;
    width: 80px;
  }
}

.black1 {
  line-height: 50px;
  margin-left: 10px;
}

.black {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: azure;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;

  }


}
</style>
